﻿<Page x:Class="App47.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:App47"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      x:Name="page"
      mc:Ignorable="d">

    <Page.DataContext>
        <local:MainPageViewModel />
    </Page.DataContext>

    <Page.Resources>
        <CollectionViewSource x:Name="ZoomedInSource"
                              IsSourceGrouped="True"
                              ItemsPath="Questions"
                              Source="{Binding Groups}"
                              d:Source="{Binding Groups, Source={d:DesignInstance local:MainPageViewModel, IsDesignTimeCreatable=True}}" />
    </Page.Resources>

    <SemanticZoom Background="{StaticResource AppBarBackgroundThemeBrush}" Padding="40,60,0,0">
        <SemanticZoom.ZoomedInView>

            <local:MyGridView ItemContainerStyle="{StaticResource ZoomedInStyle}"
                              ItemTemplate="{StaticResource ZommedInItem}"
                              ItemsSource="{Binding Source={StaticResource ZoomedInSource}}">

                <GridView.GroupStyle>
                    <GroupStyle HidesIfEmpty="True">
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Margin="0,10" Style="{StaticResource HeaderTextBlockStyle}">
                                    <Run Text="{Binding Text}" />
                                </TextBlock>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Margin="0,0,40,0"
                                                       ItemHeight="{StaticResource ZoomedInHeight}"
                                                       ItemWidth="{StaticResource ZoomedInWidth}"
                                                       MaximumRowsOrColumns="2" />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>

                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>

            </local:MyGridView>

        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>

            <GridView x:Name="ZoomedOutGridView"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch"
                      ItemContainerStyle="{StaticResource ZoomedOutStyle}"
                      ItemTemplate="{StaticResource ZoomedOutItem}"
                      ItemsSource="{Binding Groups}">

                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel VerticalAlignment="Center" Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>

            </GridView>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>

</Page>
